<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 纯文本 -->
        <!-- 相当于写的是 div.innerText = msg  -->
        <div v-text="msg">原来的内容</div>
        <!-- 把标签解析成dom元素 -->
        <!-- 相当于写的是 div.innerHTML = msg  -->
        <div v-html="msg">原来的内容</div>

        <!-- 也是代表把msg的内容输出到div里面 -->
        <!-- 效果类似于v-text -->
        <!-- 区别在于：它只会渲染写{{}}的这一部分内容，不会影响原本内容 -->
        <div>原来的内容：{{ msg }}</div>
    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    msg: '<h3>你好</h3>'
                }
            },
        })
    </script>
</body>

</html>